@media screen and (min-width: 750px) {
  html {
    font-size: 75px !important;
  }
}

@media screen and (max-width: 320px) {
  html {
    font-size: 32px !important;
  }
}

div {
  margin: auto;

  .top {
    overflow: hidden;
    width: 10rem;
    height: 7.12rem;
    background-image: linear-gradient(180deg, #f24c59 0%, #f28c4c 100%);

    .header {
      // width: 4.7467rem;
      // // margin: auto;
      display: flex;
      justify-content: space-between;
      margin-top: 1.8133rem;
      margin-left: 0.4267rem;

      .search {
        width: 7.9467rem;
        height: 0.8533rem;
        background-color: #ffffff;
        display: flex;
        border-radius: 2.48rem;
        align-items: center;

        img {
          width: 0.3733rem;
          height: 0.3733rem;
          margin: 0.24rem 0.64rem;
        }

        input {
          width: 3.7067rem;
          height: 0.5333rem;
          font-size: 0.3733rem;
        }
      }

      .news {
        //换行

        margin-right: 0.7467rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img {
          width: 0.4267rem;
          height: 0.4267rem;
        }

        span {
          color: #ffffff;
          font-size: 0.24rem;
        }
      }
    }

    .nav {
      margin-top: 0.4rem;

      li {
        // margin-left: 0.64rem;
        display: flex;
        // margin-left: 0.1333rem;
        // justify-content: space-between;
        white-space: nowrap;
        overflow-x: scroll;
        margin-left: -20px;

        &::-webkit-scrollbar {
          display: none;
        }

        span {
          // margin-left: 0.7467rem;
          margin-left: 0.8667rem;
          color: #ffffff;
          font-size: 0.3733rem;
          letter-spacing: 0.0075rem;
        }

        span:nth-child(1) {
          font-weight: 600;
          color: #ffffff;
          font-size: 0.4267rem;
          letter-spacing: 0.0075rem;
        }
      }
    }

    //轮播图
    .banner {
      border-radius: 0.2667rem;
      display: flex;
      justify-content: center;

      margin-top: 0.2667rem;

      >div {
        border-radius: 0.2667rem;
        width: 9.1733rem;
        height: 3.3067rem;

        img {
          width: 100%;
          border-radius: 0.2667rem;
        }
      }
    }
  }

  .box {
    overflow: hidden;
    width: 10rem;
    height: 100%;

    background-color: #f9f9f9;

    //百货服饰
    .navber {
      margin-top: 0.2667rem;
      overflow: hidden;
      width: 9.1733rem;
      height: 3.7867rem;
      background-color: #ffffff;
      border-radius: 0.2667rem;

      box-shadow: 0rem 0rem 0.2667rem rgba(114, 114, 114, 0.16);

      ul {
        margin-top: 0.1647rem;
        display: flex;

        li {
          display: flex;
          flex-direction: column;
          // flex-wrap: wrap;
          align-items: center;
          flex: 1;

          img {
            width: 1.1433rem;
            height: 1.2111rem;
          }

          span {
            font-size: 0.32rem;
          }
        }
      }
    }

    //新人专享
    .Exclusive {
      margin-top: 0.2667rem;
      width: 9.1733rem;
      height: 4.8rem;
      // background-color: pink;
      background-color: #ffffff;
      border-radius: 0.1333rem;
      box-shadow: 0 0 0.08rem rgba(82, 82, 82, 0.16);

      div {
        display: flex;

        .E_left {
          margin-left: 0.2133rem;
          margin-top: 0.24rem;

          >div {
            width: 4.2667rem;
            height: 4.3467rem;
            border-radius: 0.16rem;
            background-image: url(../images/首页/12@2x.png);
            background-size: cover;
            display: flex;
            flex-direction: column;
            align-items: center !important;

            span {
              width: 3.3333rem;
              height: 0.56rem;

              font-weight: 600;
              color: #ffffff;
              font-size: 0.4rem;
              margin-top: 0.2133rem;
            }

            i {
              // width: 2.6133rem;
              height: 0.3733rem;

              font-weight: 500;
              color: #eae8f2;
              font-size: 0.2667rem;
            }
          }
        }

        .E_right {
          margin-top: 0.24rem;
          display: flex;
          flex-direction: column;

          >div {
            display: flex;
            flex-direction: column;
            align-items: left;
            width: 4.2667rem;
            height: 2.1333rem;
            border-radius: 0.16rem;

            span {
              margin-left: 0.2039rem;
              width: 1.6rem;
              height: 0.56rem;
              font-family: PingFang SC;
              font-weight: 600;
              color: #ffffff;
              font-size: 0.4rem;
            }

            i {
              margin-left: 0.2039rem;
              // width: 1.76rem;
              height: 0.3733rem;
              font-family: PingFang SC;
              font-weight: 500;
              color: #ffffff;
              font-size: 0.2667rem;
            }

            em {
              // width: 1.0667rem;
              height: 0.3733rem;
              margin-top: 0.4rem;
              font-family: PingFang SC;
              font-weight: 500;
              color: #ffffff;
              font-size: 0.2667rem;
              margin-left: 0.2039rem;
            }
          }

          div:nth-child(1) {
            width: 4.2667rem;
            height: 2.1333rem;
            background-image: url(../images/首页/13@2x.png);
            background-size: cover;
          }

          div:nth-child(2) {
            margin-top: 0.1333rem;
            width: 4.2667rem;
            height: 2.1333rem;
            background-image: url(../images/首页/14@2x.png);
            background-size: cover;

            span {
              width: 1.6rem;
              height: 0.56rem;
              font-family: PingFang SC;
              font-weight: 700;
              color: #21308f;
              font-size: 0.4rem;
            }

            i {
              // width: 2rem;
              height: 0.3733rem;
              font-family: PingFang SC;
              font-weight: 500;
              color: #404ba0;
              font-size: 0.2667rem;
            }

            em {
              // width: 1.0667rem;
              height: 0.3733rem;

              font-weight: 500;
              color: #3d60ba;
              font-size: 0.2667rem;
            }
          }
        }
      }
    }

    //限时秒杀
    .spike {
      display: flex;
      margin-left: 0.4133rem;
      margin-top: 0.2667rem;
      width: 9.1733rem;
      height: 1.44rem;
      background-image: linear-gradient(180deg,
          rgba(rgba(242, 76, 89, 26%)); rgba(242, 140, 76, 0) 100%);
      border-radius: 0.2667rem 0.2667rem 0rem 0rem;
      box-shadow: 0 0 0.16rem rgba(111, 111, 111, 0);

      .spike_left {
        display: flex;
        flex-direction: column;
        margin-left: 0.3467rem;

        >span {
          width: 1.7067rem;
          height: 0.5867rem;
          font-family: PingFang SC;
          font-weight: 600;
          color: #202020;
          font-size: 0.4267rem;
        }

        >i {
          margin-top: 0.0533rem;
          // width: 2.0533rem;
          height: 0.4267rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #b0b8c2;
          font-size: 0.2933rem;
        }
      }

      .spike_right {
        margin-left: 3.6rem;
        align-items: center;
        justify-content: space-between;
        display: flex;

        >img {
          width: 0.64rem;
          height: 0.3733rem;
        }

        span {
          display: flex;
          justify-content: center;
          width: 0.4rem;
          margin-left: 0.0533rem;
          // height: 0.3733rem;
          background-color: #202020;
          border-radius: 0.0533rem;
          font-weight: 600;
          color: #ffffff;
          font-size: 0.24rem;
        }

        i {
          width: 0.24rem;
          height: 0.3467rem;
          line-height: 0.3467rem;
          font-size: 0.3333rem;

          text-align: center;
          // height: 26px;
        }
      }

      // 首页 大图lunch
    }

    .lunch {
      // background-color: red;
      width: 9.6533rem;
      height: 2.5333rem;
      box-shadow: 0px 6px 12px rgba(0, 0, 0, 0);

      img {
        width: 100%;
      }
    }

    .lunch_2 {

      //1
      >div {
        display: flex;
        width: 100%;
        height: 100%;

        >div:nth-child(1) {
          position: relative;
          width: 4.96rem;
          height: 3.68rem;
          background-image: url(../images/首页/28@2x.png);
          background-size: cover;

          >span:nth-child(1) {
            width: 2.1333rem;
            position: absolute;
            margin-top: 0.6rem;
            margin-left: 0.6133rem;
            height: 0.5867rem;
            text-shadow: 0 0 0.0533rem rgba(77, 33, 0, 0.16);
            font-family: PingFang SC;
            font-weight: 600;
            color: #000000;
            font-size: 0.4267rem;
          }

          >i {
            margin-top: 1.3067rem;
            margin-left: 0.5867rem;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1.7431rem;
            height: 0.4533rem;
            background-color: #ffa500;
            border-radius: 0.3733rem;

            >span:nth-child(1) {
              color: #ffffff;

              font-size: 0.2667rem;
            }
          }
        }

        //2
        >div:nth-child(2) {
          position: relative;
          width: 4.96rem;
          height: 3.68rem;
          background-image: url(../images/首页/28@2x.png);
          background-size: cover;

          >span:nth-child(1) {
            width: 2.1333rem;
            position: absolute;
            margin-top: 0.64rem;
            margin-left: 0.578rem;
            height: 0.5867rem;
            text-shadow: 0 0 0.0533rem rgba(77, 33, 0, 0.16);
            font-family: PingFang SC;
            font-weight: 600;
            color: #000000;
            font-size: 0.4267rem;
          }

          >i {
            margin-top: 1.3067rem;
            margin-left: 0.5867rem;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1.7431rem;
            height: 0.4533rem;
            background-color: #a51919;
            border-radius: 0.3733rem;

            >span:nth-child(1) {
              color: #ffffff;
              font-size: 0.2667rem;
            }
          }
        }
      }
    }

    .list {
      margin-bottom: 0.4rem;
      width: 9.6rem;
      // height: 2.1333rem;
      // background-color: red;
      border-radius: 0rem 0.3333rem 0rem 0.3333rem;
      box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);

      ul {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;

        li {
          overflow: hidden;
          width: 2.1333rem;
          height: 3.2rem;
          // background-color: pink;
          display: flex;
          justify-content: left;
          align-items: left;
          flex-direction: column;

          span:nth-child(1) {
            margin-left: 0.3333rem;
            font-size: 0.4rem;
            font-weight: 600;
            margin-top: 0.4rem;
          }

          span:nth-child(2) {
            margin-top: 20px;
            width: 1.44rem;
            height: 0.4533rem;
            white-space: nowrap;
            background-color: #ffffff;

            border: 0.0267rem solid;
            border-color: #f49641;
            border-radius: 0.0533rem;
            margin-left: 0.2667rem;
            color: yellow;
            font-size: 0.2667rem;
            text-align: center;
          }

          img {
            width: 100%;
            height: 100%;
            position: relative;
            bottom: -0.2rem;
            right: -0.3733rem;
          }
        }
      }
    }

    //两栏布局
    .column {
      width: 10rem;
      height: 100%;

      // background-color: red;
      .left {
        width: 4.48rem;
        height: 6.8rem;
        float: left;
        margin-left: 0.2667rem;
        background-color: #ffffff;
        border-radius: 0.2667rem;
        box-shadow: 0 0 0.16rem rgba(139, 139, 139, 0.3);
        // background-color: pink;

        margin-top: 0.2133rem;
        transform: translateY(-0.2133rem);

        >div {
          img {
            width: 4.48rem;
            height: 4.48rem;
          }

          >div {
            >span {
              width: 4.1867rem;
              height: 1.0667rem;
              font-weight: 500;
              color: #3d444d;
              font-size: 0.3733rem;
              margin-left: 0.2133rem;
            }

            i {
              margin-left: 0.2133rem;
              font-weight: 500;
              color: #3d444d;
              margin-top: 0.1333rem;
              font-size: 0.3733rem;
            }

            >div {
              display: flex;
              align-items: center;
              margin-top: 0.2rem;

              .e1 {
                width: 1.6267rem;
                height: 0.6667rem;

                font-weight: 600;
                color: #eb5f3e;
                font-size: 0.48rem;

                margin-left: 0.1333rem;
              }

              .e2 {
                width: 2.5467rem;
                height: 0.4533rem;
                font-family: PingFang SC;
                color: #c0c5cc;
                font-size: 0.32rem;
                margin-left: 0.72rem;
              }
            }
          }
        }
      }

      .right {
        background-color: #ffffff;
        border-radius: 0.2667rem;
        box-shadow: 0 0 0.16rem rgba(155, 155, 155, 0.3);
        margin-right: 0.2667rem;
        margin-top: 0.2133rem;
        transform: translateY(-0.2133rem);
        width: 4.48rem;
        height: 7.84rem;
        float: right;

        // background-color: #21308f;
        >div {
          img {
            width: 4.48rem;
            height: 4.48rem;
            position: relative;
          }

          >div {
            >em {
              display: block;
              background-color: #eb5f3e;

              position: absolute;
              // top: 0.44rem;
              top: 4.6667rem;

              width: 0.6933rem;
              height: 0.32rem;
              white-space: nowrap;
              border-radius: 0.16rem;
              font-size: 0.2133rem;
              text-align: center;
              left: 8px;
            }

            >span {
              width: 4.1867rem;
              height: 1.0667rem;
              font-weight: 500;
              color: #3d444d;
              font-size: 0.3733rem;
              margin-left: 0.8533rem;
              // margin-left: 0.2133rem;
            }

            i {
              margin-left: 0.2133rem;
              font-weight: 500;
              color: #3d444d;
              margin-top: 0.1333rem;
              font-size: 0.3733rem;
            }

            >div {
              display: flex;
              align-items: center;
              margin-top: 0.2rem;

              .e1 {
                width: 1.6267rem;
                height: 0.6667rem;
                font-family: PingFang SC;
                font-weight: 600;
                color: #eb5f3e;
                font-size: 0.48rem;

                margin-left: 0.1333rem;
              }

              .e2 {
                width: 2.5467rem;
                height: 0.4533rem;
                font-family: PingFang SC;
                color: #c0c5cc;
                font-size: 0.32rem;
                margin-left: 0.72rem;
              }
            }
          }
        }
      }
    }
  }

  .spike_img {
    border-radius: 0px 0px 20px 20px;
    display: flex;
    width: 9.1733rem;
    height: 2.2933rem;
    background-color: #ffffff;
    margin: auto;
    margin-top: 0.0267rem;

    ul {
      display: flex;
      width: 6.4rem;
      margin-left: 0.6667rem;

      li {
        display: flex;
        margin-left: 0.3333rem;

        flex-direction: column;

        align-items: center;

        img {
          width: 1.6rem;
          height: 1.6rem;
        }

        span {
          width: 0.8533rem;
          height: 0.4267rem;
          font-family: PingFang SC;
          font-weight: 600;
          color: #ff6200;
          font-size: 0.2933rem;
        }
      }
    }
  }

  //底部home栏
  .Home {
    background-color: #ffffff;
    margin: auto;
    width: 10rem;
    height: 1.4133rem;
    left: 50%;
    transform: translateX(-50%);
    //   background-color: red;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;

    div {
      a {
        margin-top: 0.2857rem;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 0.5336rem;
          height: 0.5127rem;
        }

        //   display: block;
      }

      span {
        width: 0.5333rem;
        height: 0.3733rem;

        color: #848484;
        font-size: 0.2667rem;
      }
    }
  }
}